<template>
    <view class="debug">
      <canvas
        canvas-id="captchaCanvas"
        style="width: 200px; height: 80px"
        @click="onCanvas"
      ></canvas>
    </view>
  </template>
  
  <script>
  export default {
    data() {
      return {};
    },
    // 计算属性
    computed: {},
  
    methods: {
      onCanvas() {
        const ctx = wx.createCanvasContext("captchaCanvas");
        // 生成随机的验证码文字
        const captchaText = generateCaptchaText();
        // 绘制背景
        ctx.setFillStyle("#f5f5f5");
        ctx.fillRect(0, 0, 200, 80);
        // 绘制文字
        ctx.setFontSize(40);
        ctx.setTextAlign("center");
        ctx.setTextBaseline("middle");
        ctx.setFillStyle("#333");
        ctx.fillText(captchaText, 100, 40);
        // 绘制干扰线
        for (let i = 0; i < 5; i++) {
          ctx.setStrokeStyle(getRandomColor());
          ctx.beginPath();
          ctx.moveTo(getRandomNumber(0, 200), getRandomNumber(0, 80));
          ctx.lineTo(getRandomNumber(0, 200), getRandomNumber(0, 80));
          ctx.stroke();
        }
        // 绘制干扰点
        for (let i = 0; i < 50; i++) {
          ctx.setFillStyle(getRandomColor());
          ctx.beginPath();
          ctx.arc(
            getRandomNumber(0, 200),
            getRandomNumber(0, 80),
            1,
            0,
            2 * Math.PI
          );
          ctx.fill();
        }
        // 将绘制的内容渲染到canvas上
        ctx.draw();
        // 生成随机的验证码文字
        function generateCaptchaText() {
          const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678";
          let captchaText = "";
          for (let i = 0; i < 4; i++) {
            captchaText += chars.charAt(Math.floor(Math.random() * chars.length));
          }
          return captchaText;
        }
        // 生成指定范围内的随机整数
        function getRandomNumber(min, max) {
          return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        // 生成随机颜色值
        function getRandomColor() {
          const letters = "012345";
        }
      },
    },
    mounted() {
      this.onCanvas();
    },
  };
  </script>
  
  <style lang="scss" ></style>